<template v-if="isRouterAlive">
    <!-- 弹窗添加链接 -->
    <el-dialog v-model="addLinkDialogFormVisible" title="添加链接" width="400px" center
        @close="addLinkCloseDialog(ruleFormRef)">
        <el-form ref="ruleFormRef" :model="form" :rules="rules">
            <el-form-item prop="urlName" label="网站名称：">
                <el-input v-model="form.urlName" placeholder="请输入网站名称" />
            </el-form-item>
            <el-form-item prop="urlAddres" label="网站地址：">
                <el-input v-model="form.urlAddres" placeholder="请输入网站地址" />
            </el-form-item>
            <el-form-item prop="urlReferral" label="网站介绍：">
                <el-input v-model="form.urlReferral" placeholder="请输入网站介绍" maxlength="50" show-word-limit />
            </el-form-item>
            <el-form-item prop="urlType" label="网站类型：">
                <el-select v-model="form.urlType" placeholder="请选择网站类型">
                    <el-option label="学习网站" value="1" />
                    <el-option label="友情链接" value="2" />
                </el-select>
            </el-form-item>
            <el-form-item prop="urlLitimg" label="网站首页：">
                <el-upload ref="uploadEle" style="width:100%;height: 150px;" class="upload-demo" drag :action="uploadURL"
                    :on-success="handleAvatarSuccess" :before-upload="beforeUploadFunction"
                    :on-preview="handlePictureCardPreview">
                    <img w-full v-if="imageUrl" :src="imageUrl" class="avatar" style="height: 100%;object-fit: cover;" />
                    <el-icon class="el-icon--upload" v-if="!imageUrl">
                        <upload-filled />
                    </el-icon>
                    <div class="el-upload__text" v-if="!imageUrl">
                        图片拖拽此处或者<em>点击上传</em>
                    </div>
                    <el-dialog v-model="dialogVisible">
                        <img w-full :src="imageUrl" alt="Preview Image" />
                    </el-dialog>
                </el-upload>
            </el-form-item>
            <el-form-item prop="webmasterEmail" label="站长邮箱：">
                <el-input v-model="form.webmasterEmail" placeholder="请输入站长邮箱" />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="addLinkCloseDialog(ruleFormRef)">取消</el-button>
                <el-button plain color="#2fa7b9" @click="submitAdd(ruleFormRef)">添加</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import {
    reactive,
    ref,
    toRefs,
    nextTick,
    watch
} from 'vue'

import {
    ElMessage,
} from 'element-plus'
import { InsertUrl } from "@/api/backstage/index";
import type { FormInstance, FormRules, UploadFile, UploadInstance } from 'element-plus'

type Props = {
    addLinkDialogFormVisible: any,
}
const props = withDefaults(defineProps<Props>(), {
    addLinkDialogFormVisible: false,
})
const emit = defineEmits(['onAddLinkCloseDialog'])
// 获取文件上传元素
const uploadEle = ref(null)
// 获取页面元素
const ruleFormRef = ref<FormInstance>();
const state = reactive({
    // 弹窗状态
    addLinkDialogFormVisible: props.addLinkDialogFormVisible,
    form: {
        urlName: "",
        urlAddres: "",
        urlReferral: "",
        urlType: "",
        urlLitimg: "",
        webmasterEmail: ""
    },
    // 图片上传到服务器的路径
    uploadURL: import.meta.env.VITE_HTTP + "upload/thumbnailUpload",
    imageUrl: ''
})
const { addLinkDialogFormVisible, form, uploadURL, imageUrl } = toRefs(state)
watch(() => props.addLinkDialogFormVisible, (val, preVal) => {
    state.addLinkDialogFormVisible = val
})
// 网站名称非空验证
const validateUrlName = (rule: any, value: any, callback: any) => {
    if (!value) {
        return callback(new Error('请填写此字段~'))
    } else {
        callback()
    }
};



// 网址正则
var urlGrep = new RegExp('^((https|http|ftp|rtsp|mms)?://)' +
    "+(([0-9a-z_!~*'().&=+$%-]+: )?[0-9a-z_!~*'().&=+$%-]+@)?" + '(([0-9]{1,3}\\.){3}[0-9]{1,3}' + '|' +
    "([0-9a-z_!~*'()-]+\\.)*" + '([0-9a-z][0-9a-z-]{0,61})?[0-9a-z]\\.' + '[a-z]{2,6})' +
    '(:[0-9]{1,5})?' + '((/?)|' + "(/[0-9a-zA-Z_!~*'().;?:@&=+$,%#-]+)+/?)$");
// 网站地址非空验证
const validateUrlAddres = (rule: any, value: any, callback: any) => {
    if (!value) {
        return callback(new Error('请填写此字段~'))
    } else {
        if (!urlGrep.test(value)) {
            callback(new Error('请按照URL标准格式填写，必须包含http/https'));
        } else {
            callback()
        }
    }
};

// 网站简介非空验证
const validateUrlReferral = (rule: any, value: any, callback: any) => {
    if (!value) {
        return callback(new Error('请填写此字段~'))
    } else {
        callback()
    }
};

// 网站类型非空验证
const validateUrlType = (rule: any, value: any, callback: any) => {
    if (!value) {
        return callback(new Error('请填写此字段~'))
    } else {
        callback()
    }
};

// 图片是否上传
const validateUrlLitimg = (rule: any, value: any, callback: any) => {
    if (state.imageUrl == "") {
        return callback(new Error('网站缩略图未上传成功，上传后再添加哟~'))
    } else {
        callback()
    }
};

// 邮箱正则表达式判断
var emailGrep = /^\w+@[\da-z\.-]+\.([a-z]{2,6}|[\u2E80-\u9FFF]{2,3})$/;
// 站长邮箱验证
const validateWebmasterEmail = (rule: any, value: any, callback: any) => {
    if (!value) {
        return callback(new Error('请填写此字段~'))
    } else {
        if (!emailGrep.test(value)) {
            callback(new Error('请按照正确的邮箱格式输入'));
        } else {
            callback()
        }
    }
}

// 约束规则 正则
const rules = reactive({
    urlName: [{
        validator: validateUrlName,
        trigger: 'blur'
    }],
    urlAddres: [{
        validator: validateUrlAddres,
        trigger: 'blur'
    }],
    urlReferral: [{
        validator: validateUrlReferral,
        trigger: 'blur'
    }],
    urlType: [{
        validator: validateUrlType,
        trigger: 'blur'
    }],
    urlLitimg: [{
        validator: validateUrlLitimg,
        trigger: 'blur'
    }],
    webmasterEmail: [{
        validator: validateWebmasterEmail,
        trigger: 'blur'
    }],
});

// 图片上传格式、大小要求
const beforeUploadFunction = (rawFile: any) => {
    if (rawFile.type !== 'image/jpeg' &&
        rawFile.type !== 'image/jpg' &&
        rawFile.type !== 'image/png' &&
        rawFile.type !== 'image/gif') {
        ElMessage.error('仅支持图片格式.png | .jpg | .jpeg | .gif ')
        return false
    } else if (rawFile.size / 1024 / 1024 > 5) {
        ElMessage.error('仅支持大小不超过5MB的图片!')
        return false
    }
    return true
}

// 图片上传成功后执行的函数
const handleAvatarSuccess = (response: any) => {
    state.imageUrl = import.meta.env.VITE_HTTP + response.data;
}

// 局部组件刷新
const isRouterAlive = ref(true);
// 删除组件
isRouterAlive.value = false;
nextTick(() => {
    // 重新渲染组件
    isRouterAlive.value = true;
});
// 取消
const addLinkCloseDialog = (formEl: FormInstance | undefined) => {
    // 关闭窗口
    if (!formEl) return
    emit("onAddLinkCloseDialog", false);
    // 清空已上传的文件列表
    // 重置表单项，将其值重置为初始值，并移除校验结果
    formEl.resetFields()
    // 清空图片
    state.imageUrl = "";
    // location.reload();
};

// 链接添加
const submitAdd = async (formEl: FormInstance | undefined) => {
    // 1：校验链接信息
    if (!formEl) return
    await formEl.validate((valid) => {
        // 如果表单校验成功 提交数据到后台
        if (valid) {
            const imageUrl = state.imageUrl.replace(import.meta.env.VITE_HTTP, "");
            const params = {
                urlName: state.form.urlName,
                urlAddres: state.form.urlAddres,
                urlReferral: state.form.urlReferral,
                urlType: state.form.urlType,
                urlLitimg: imageUrl,
                webmasterEmail: state.form.webmasterEmail,
            }
            InsertUrl(params).then((res) => {
                if (res.code === 0) {
                    // 关闭弹窗
                    emit("onAddLinkCloseDialog", false);
                    // 重置表单项，将其值重置为初始值，并移除校验结果
                    formEl.resetFields()
                    // 清空已上传的文件列表
                }
            })

        }
    })

}


const dialogVisible = ref(false)

const handlePictureCardPreview = (uploadFile: any) => {
    uploadEle.value = uploadFile.url
    dialogVisible.value = true
}
</script>
<style scoped>
.el-button--text {
    margin-right: 15px;
}

.dialog-footer button:first-child {
    margin-right: 10px;
}

.el-select {
    width: 100%;
}

:global(.el-dialog__title) {
    color: #2fa7b9 !important;
    font-size: 20px !important;
    font-weight: 700 !important;
}

:deep(.el-upload-dragger) {
    padding: 0px !important;
    width: 100%;
    height: 130px;
}

:global(.el-dialog__body) {
    padding: 25px calc(var(--el-dialog-padding-primary) + 5px) 0px !important;
}
</style>